<template>
  <ContentWrap>
    <el-form :model="queryParams" ref="queryFormRef" label-width="auto" :inline="true">
      <el-form-item label="人员" prop="ownerIds">
        <el-select
          v-model="queryParams.ownerIds"
          placeholder="请选择人员"
          :clearable="true"
          multiple
        >
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.nickname"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="统计时间" prop="statisticsTime">
        <el-date-picker
          v-model="queryParams.statisticsTime"
          type="daterange"
          value-format="YYYY-MM-DD HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleClickSearch">
          <Icon icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="handleClickReset">
          <Icon icon="ep:refresh" />
          重置
        </el-button>
      </el-form-item>
    </el-form>
    <Table
      :columns="columns"
      :adaptive="true"
      :data="queryData"
      height-per="90"
      @page-change="getPage"
    />
  </ContentWrap>
</template>
<script setup name="ReceiveSend" lang="ts">
import * as UserApi from '@/api/system/user/user'
import { formatDate } from '@/utils/formatTime'
import * as StatisticsMailApi from '@/api/statistics/statisticsMail'
const message = useMessage() // 消息弹窗
const userList = ref<UserApi.UserVO[]>([])
const queryFormRef = ref()
const queryParams = ref({
  ownerIds: [],
  statisticsTime: [
    formatDate(new Date(), 'YYYY-MM-01 00:00:00'),
    formatDate(new Date(), 'YYYY-MM-DD 23:59:59')
  ] as any
})
const queryData = ref()
const columns = [
  {
    label: '时间',
    prop: 'statisticsTime',
    formatter: ({ statisticsTime }) => formatDate(statisticsTime, 'YYYY-MM-DD')
  },
  {
    label: '人员',
    prop: 'ownerId',
    formatter: ({ ownerId }) => userList.value.find((obj) => obj.id === ownerId)?.nickname
  },
  {
    label: '接收邮件数',
    prop: 'receiveCount'
  },
  {
    label: '发送邮件数',
    prop: 'sendCount'
  },
  {
    label: '一对一发送邮件数',
    prop: 'oneSendCount'
  }
]
/** 初始化 */
onMounted(async () => {
  userList.value = await UserApi.getOwnerUser()

  handleClickReset()
})

/** 搜索按钮操作 */
const handleClickSearch = () => {
  getPage()
}

/** 重置按钮操作 */
const handleClickReset = () => {
  queryFormRef.value?.resetFields()
  handleClickSearch()
}

/** 处理响应事件  */
const getPage = async () => {
  if (queryParams.value.statisticsTime == undefined || queryParams.value.statisticsTime == null) {
    message.error('请选择统计时间')
    return
  }
  queryData.value = await StatisticsMailApi.receiveSendQuery(queryParams.value)
}
</script>
